<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        div{
            margin:50px auto;
            width: 550px;
        }
        body{
            background: url("./image/c.jpg");
        background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
            backdrop-filter: blur(5px);
        }
    </style>
</head>

<body>
<div id="as">


    <table class="table table-hover">
        <thead>
        <td>序号</td>
        <td>品种名称</td>
        <td>详细内容链接</td>
        <td></td>
        </thead>
        <tr>
            <td class="info"></td>
            <td class="warning"><input type="text" placeholder="品种名称" v-model="name"></td>
            <td class="active"><input type="text" placeholder="详细内容链接" v-model="charst"></td>
            <td class="active"><button type="button" @click="add">添加</button></td>

        </tr>
        <tr v-for="(item,i) in qa">
            <td class="info">{{item.id}}</td>
            <td class="warning">{{item.name}}</td>
            <td class="active"><a :href="item.charst" target="_blank">{{item.charst}}</a></td>
            <td class="active"><button type="button" @click="delet(i)">删除</button></td>
        </tr>
        <tr>
            <td colspan="4"align="center"class="breadcrumb"><a href="serch.html">重新查询</a></td>
        </tr>
    </table>
    <div class="btn-group btn-group-lg">
        <div align="center">
            <span @click="ad(1)"class="btn btn-success ">首页</span>
            <span @click="ad(current-1)"class="btn btn-success ">上一页</span>

            <span @click="ad(current+1)" class= "btn btn-success ">下一页</span>

            <span @click="ad(tot)" class="btn btn-success ">尾页</span>
        </div>
        <div align="center" >
            <table>
            <td style="color: red">当前第{{current}}页，共{{tot}}页</td>
            </table>
        </div>
    </div>

</div>
<script src="axios.min.js"></script>
<script>
    $("thead").css("background", "lightsteelblue")
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script type="module">
    const { createApp, ref,reactive,onMounted,onUnmounted} = Vue;

    const app = createApp({
        setup() {
            const list = reactive([])
            const id = ref(0)
            const tot = ref("")
            const current = ref("")
            const qa=reactive([])
            const name= ref("")
            const charst = ref("")
            const add=async ()=>{
                let a=name.value;
                let b=charst.value;
                if(confirm('确定添加？')) {
                    try {
                        const {data} = await axios.get('./adddata', {params: {name: a, charst: b}})
                        let qw = data.CC;
                        if (qw == 1) {
                            alert("添加成功！")
                            // 在Vue3的组合式API中，
                            // 可以使用setTimeout或setInterval结合location.reload()来实现页面的自动刷新。
// 开始计时
                            let b=setTimeout(() => {
                                if (confirm('页面即将刷新，确认继续吗？')) {
                                    location.reload();
                                }
                            }, 1000);
                            // 5000ms

                        } else {
                            alert("添加失败！")
                        }
                    } catch (error) {
                        console.log('获取失败：', error)
                    }
                }else{
                    console.log('取消')
                }
            }
            const delet =async(i)=>{
                if(confirm('确定删除？')) {
                    try {
                        let a = qa[i].name;

                        const {data} = await axios.get('./deletdata', {params: {na: a}})
                        let qw = data.cs;
                        if (qw == 1) {
                            alert("删除成功！")
                            let b=setTimeout(() => {
                                if (confirm('页面即将刷新，确认继续吗？')) {
                                    location.reload();
                                }
                            }, 1000);
                        } else {
                            alert("删除失败！")
                        }
                    } catch (error) {
                        console.log('获取失败', error)
                    }
                }else{
                    console.log('取消')
                }
            }
            const ad = async (cu) => {



                try {
                    const { data } = await axios.get("./pageallinfo",{params:{cu:cu}});
                    //console.log(data);

                    tot.value=data.totalpages

                    current.value=data.current
                    //cu=current.value
                    const qq = data.user;
                    //push是追加，用法是在后面的括号里添加列表、数组的所有值，而不是赋值
                    qa.splice(0,qq.length)
                    for(let i=0;i<qq.length;i++){
                        qa.push(qq[i])
                    }
                    //返回的user数据封装在一个user类型的列表里，不是一个user字符对象，不需要用正则进行解析
//console.log(qq[0].id)




//console.log(qa[0].id)

                } catch (error) {
                    console.error('获取文本失败:', error);
                }

            }
            onMounted(() => {

                ad();
            });
onUnmounted(()=>{
    if(b){
        clearTimeout(b)
    }
});
            return {
                ad, id, list,tot,current,qa,name,charst,add,delet
            }
        }
    })
    app.mount("#as");

</script>

</body>

</html>